<!DOCTYPE html>
<html ng-app="formExample">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>W4</title>
</head>

<body>
    <script src="js/angular-1.4.8.min.js"></script>

    <form name="myForm" ng-controller="fc" class="my-form">
        userType:
        <input name="input" ng-model="userType" required ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.input.$error.required">Required!</span>
        <br>
        <tt>userType = {{userType}}</tt>
        <br>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt>
        <br>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt>
        <br>
        <tt>myForm.$valid = {{myForm.$valid}}</tt>
        <br>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
        <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
        <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>

        
        <br>
    </form>
</body>

</html>

    <script type="text/javascript">
    angular.module('formExample', []).controller('fc', ['$scope', function($scope){
      $scope.userType="Hello!";
    }]);

    </script>


<style type="text/css">
.my-form {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    background: transparent;
}

.my-form.ng-invalid {
    background: red;
}
</style>
